<template>
	<view class="momentsBox">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#060143'}"></view>
		<uni-nav-bar backgroundColor="#060143;" color="#FFF" :title="$t('language.share')" @clickLeft="goBack"
			left-icon="left" :border="false" />

		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>
		<view class="momentsListBox">
			<view class="listgroup" v-for="(item,index) in moments" :key="index">
				<view class="messageBox">
					<!-- <view class="userCover">
						<image :src="item.avatar" />
					</view> -->
					<view class="userMessage">
						<view class="userName">{{$t('language.name') == '中文' ? item.ch_name : item.en_name}}</view>
						<view class="hotelName" v-if="item.hotel_info">{{$t('language.name') == '中文' ? item.hotel_info.hotel_name_zh : item.hotel_info.hotel_name}}</view>
						<view class="userTitle">{{item.content}}</view>
						<view class="imageBox"
							:style="{'justify-content': (item.image.length == 2 ?'space-between':'flex-start')}">
							<image
								v-bind:style="{width: item.image.length == 1? '70%':(item.image.length == 2? '46%':(item.image.length == 3?'31%':'31%')),height: item.image.length == 1? '310upx':(item.image.length == 2? '240upx':(item.image.length == 3?'165upx':'165upx')) }"
								v-for="(itemimage,imgindex) in item.image" :key="imgindex" :src="itemimage"
								@click="previewImage(item,imgindex)" style="object-fit: cover;" mode="aspectFill">
							</image>
						</view>
						<view class="timeBox">
							<view style="display:flex;item-align:center">
								{{item.add_time}}
								<uni-icons type="trash" size="15" color="#fff" @click.native.self="removeMyTopic(index,item.topic_id)"
									style="margin-left:8upx;position: relative;top: 4upx;" 
									v-if="item.delete == 1"></uni-icons>
							</view>
							<view class="like_msg" style="background-color: transparent;">
								<!-- <view @click="showLeft(index,item)" class="showClick">· ·</view> -->
								<!-- <view :style="{'width': item.show ? '140px' : '0'}" class="likeAndCommon"> -->
								<view style="width: 140px;right: 0;" class="likeAndCommon">
									<view @click="item.zan == 0 ?clickLike(index):removeLike(index)">
										<image :src="`${baseUrl}/static/img/like.png`" />
										{{item.zan == 0 ? $t('language.like'):$t('language.unlike')}}
									</view>
									<view class="common" @click="sendMessage(item.topic_id, item.user_id, 1)">
										<image :src="`${baseUrl}/static/img/commom.png`" />
										{{$t('language.common')}}
									</view>
								</view>
							</view>
						</view>
						<view class="commentBox" v-if="item.zan_list.length != 0 || item.comment.length != 0">
							<view class="likePeople" v-if="item.zan_list.length != 0">
								<view class="likePeopleList">
									<view class="colorLike">
										<!-- <image :src="`${baseUrl}/static/img/colorLike.png`" /> -->
										<uniIcons type="heart" size="18" color="#a88059"></uniIcons>
										<text v-for="(likePeople ,index) in item.zan_list"
											:key="index">{{index == 0 ? likePeople :  ',' +  likePeople }}</text>
									</view>
								</view>
							</view>
							<view class="commentList" v-if="item.comment.length != 0">
								<view class="commentMessage" v-for="c_item in item.comment" :key="c_item.comment_id">
									<view v-if="c_item.reply == 1" @click="removethistopic(c_item, item.topic_id)">
										<view class="commentUser">
											{{$t('language.name') == '中文' ? c_item.ch_name : c_item.en_name}} :
											<text>{{c_item.content}}</text>
										</view>
									</view>
									<view v-if="c_item.reply == 2" @click="removethistopic(c_item, item.topic_id)">
										<view class="commentUser">
											{{$t('language.name') == '中文' ? c_item.ch_name : c_item.en_name}}
											<text>{{$t('language.Reply')}}</text>
											{{$t('language.name') == '中文' ? c_item.parent_user_id_name : c_item.parent_user_id_english_name}} :
											<text>{{c_item.content}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="show" class="showMore">
				<view></view>
				<text>•</text>
				<view></view>
			</view>
		</view>
		<view class="saveMoments" @click="toEdit()">
			<image
				src=""
				mode=""></image>
		</view>
		<view class="sendOut" v-show="showSendOut" @click.self="hideSendOut">
			<view class="inputBox">
				<input id="txt" @click.stop.native :focus="isFocus" type="text"
					:placeholder="isComment == 1? $t('language.Pcomment'):($t('language.Reply') + commentUser)"
					v-model="CommentValue" />
				<text
					:style="{'background': (CommentValue.length != 0 ? '#d96932':'#eee'),'color':(CommentValue.length != 0 ? '#fff':'#666')}"
					@click.stop="saveMessage()">{{$t('language.send')}}</text>
			</view>
		</view>
		<uni-popup ref="popup" class="removeReply" type="bottom" :animation="false">
			<view class="popup-content">
				<input @click="removeMyCommon" readonly type="text" :value="$t('language.Remove')" />
				<input @click="closePopup" readonly type="text" :value="$t('language.cancel')" />
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

	import {
		topic,
		fabulous,
		comment,
		comment_delete,
		topic_delete,
		user_info
	} from "@/api/user";
	let timer = null
	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"

	export default {
		name: "Momentslist",
		components: {
			uniIcons,
			uniPopup
		},
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				evenId: "",
				isComment: 1,
				showSendOut: false,
				CommentValue: "", //当前被评论帖子内容
				topicId: "", //当前被评论帖子id
				parent_userid: "", //当前被评论人的id
				commentUser: "",
				moments: [],
				loading: false,
				isScroll: true,
				show: false,
				removeReply: false,
				isFocus: false,
				removeCommontId: "",
				pageNo: 1,
				pageIndex: 1,
				safeTop: '',
				ch_name: '',
				en_name: '',
				isOnShow: true
			};
		},
		async onLoad(o) {
			const safe = uni.getSystemInfoSync()
			this.safeTop = safe.safeArea.top
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			let evenId = o.evenId;
			this.evenId = evenId;
			this.load();
			const user = await user_info({
				event_id: evenId,
				user_id: uni.getStorageSync('USERID')
			})
			if (user.code == 200) {
				uni.hideLoading()
				uni.setStorageSync('userinfo', user.data)
				let {
					en_name,
					ch_name
				} = user.data
				this.ch_name = ch_name
				this.en_name = en_name
			}
		},
		components: {
			uniPopup
		},
		onShow() {
			// if(!this.isOnShow) return
			// this.pageNo = 1
			// this.moments = []
			// this.load();
		},
		created() {},
		onReachBottom() {
			if (this.isScroll) return
			this.pageNo += 1
			this.load()
		},
		methods: {
			hideSendOut() {
				this.showSendOut = false
				this.topicId = ''
				this.parent_userid = ''
			},
			closePopup() {
				// this.removeReply = false
				this.removeCommontId = ''
				this.$refs.popup.close()
			},
			load() {
				this.isScroll = true;
				uni.showLoading({
					title: 'Load...'
				})
				topic({
					event_id: this.evenId,
					page: this.pageNo
				}).then(
					response => {
						uni.hideLoading()
						this.isScroll = false;
						if (response.code == 200) {
							let resmoments = response.data;
							if (resmoments.length > 0) {
								this.moments = [...this.moments, ...resmoments]
							} else {
								this.show = true;
							}
						} else {
							console.log(response);
						}
					},
					err => {
						uni.hideLoading()
						console.log(err)
					}
				);
			},

			clickLike(index) {
				fabulous({
					event_id: this.evenId,
					topic_id: this.moments[index].topic_id
				}).then(
					response => {
						if (response.code == 200) {
							this.moments[index].zan = 1;
							// this.moments[index].zan_list.push(uni.getStorageSync("userName"));
							this.moments[index].zan_list.push(this.en_name);
							
							this.moments.forEach(c_item => {
								this.$set(c_item, 'show', false)
							})
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none'
							})
						}
					},
					err => {
						console.log(err)
					}
				);
			},

			removeLike(index) {
				fabulous({
					event_id: this.evenId,
					topic_id: this.moments[index].topic_id
				}).then(
					response => {
						if (response.code == 200) {
							this.moments[index].zan = 0;
							// let nindex = this.moments[index].zan_list.indexOf(uni.getStorageSync('userName'));
							let nindex = this.moments[index].zan_list.indexOf(this.en_name);
							this.moments[index].zan_list.splice(nindex, 1)

							this.moments.forEach(c_item => {
								this.$set(c_item, 'show', false)
							})

						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none'
							})
						}
					},
					err => {
						console.log(err)
					}
				);
			},

			sendMessage(topicId, parent_userid, reply) {
				//评论发起
				this.parent_userid = parent_userid;
				this.topicId = topicId;
				this.isComment = reply;
				
				this.$nextTick(() => {
					this.showSendOut = true;
					this.isFocus = true
				});

				this.moments.forEach(c_item => {
					this.$set(c_item, 'show', false)
				})
			},

			removeMyCommon() {
				console.log(55555)
				//remove comment
				comment_delete({
					event_id: this.evenId,
					topic_id: this.topicId,
					comment_id: this.removeCommontId
				}).then(
					response => {
						if (response.code == 200) {
							// this.removeReply = false;
							this.$refs.popup.close()
							this.topicId = "";
							this.removeCommontId = "";
							this.moments = [];
							this.pageNo = 1;
							this.load();
						}
					},
					err => {
						console.log(err)
					}
				);
			},

			removeMyTopic(index, id) {
				console.log(index, id); //remove my topic
				const _this = this
				uni.showModal({
					title: _this.$i18n.locale == 'zh' ? "提示" : "Tips",
					content: _this.$i18n.locale == 'zh' ? "确认删除吗？" : "Are you sure you want to delete it ?",
					confirmText: _this.$i18n.locale == 'zh' ? "确认" : "Confirm",
					cancelText: _this.$i18n.locale == 'zh' ? "取消" : "Cancel",
					success(res) {
						if (res.confirm) {
							topic_delete({
								event_id: _this.evenId,
								topic_id: id
							}).then(
								response => {
									if (response.code == 200) {
										_this.moments.splice(index, 1);
									} else {
										uni.showToast({
											title: response.msg,
											icon: 'none'
										})
									}
								},
								err => {
									console.log(err)
								}
							);
						}
					}
				})
			},

			saveMessage() {
				if (this.CommentValue == "") {
					let messagetips =
						this.$i18n.locale == 'zh' ?
						"请输入内容" :
						"Please enter content";
					uni.showToast({
						title: messagetips,
						icon: 'none'
					})
					return false;
				}

				console.log(this.parent_userid, 'this.parent_userid')
				comment({
					event_id: this.evenId,
					topic_id: this.topicId,
					parent_user_id: this.parent_userid,
					content: this.CommentValue,
					reply: this.isComment
				}).then(
					response => {
						console.log(response);
						if (response.code == 200) {
							this.showSendOut = false;
							this.topicId = "";
							this.parent_userid = "";
							this.CommentValue = "";
							this.moments = [];
							this.pageNo = 1;
							this.load();
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none'
							})
						}
					},
					err => {
						console.log(err)
					}
				);
			},

			removethistopic(comment, topicId) {
				//删除自己的评论及发起回复
				this.topicId = topicId;
				if (comment.comment_delete) {
					// this.removeReply = true;
					this.$refs.popup.open()
					this.removeCommontId = comment.comment_id;
				} else {
					this.isComment = 2;
					this.parent_userid = comment.user_id;
					(this.commentUser =
						this.$i18n.locale == 'zh' ?
						comment.ch_name :
						comment.en_name),
					this.$nextTick(() => {
						this.showSendOut = true;
						this.isFocus = true
					});
				}
			},

			previewImage(itemimage, imgIndex) {
				let itemimageArrey = itemimage;
				let itemimageIndex = imgIndex;
				var _that = this;
				this.isOnShow = false
				wx.previewImage({
					current: itemimageArrey.image[itemimageIndex], // 当前显示图片的http链接
					urls: itemimageArrey.image // 需要预览的图片http链接列表
				});
			},

			showLeft(index, item) {
				if (!item.show) {
					this.$set(item, 'show', true)
				} else {
					this.$set(item, 'show', false)
				}
				this.moments.forEach(c_item => {
					if (c_item.topic_id != item.topic_id) {
						this.$set(c_item, 'show', false)
					}
				})
				this.$forceUpdate()
			},

			toEdit() {
				this.isOnShow = true
				uni.navigateTo({
					url: '/pages/Moments/Edit?evenId=' + this.evenId
				})
			},
			goBack() {
				uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #050033;
	}

	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		background-color: #060143;

		.logo-ic {
			width: 78upx;
			height: 64upx;
		}

		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	.momentsBox {
		position: relative;
	}

	.headerChangeLanguage {
		height: 100upx;
		background: #fff;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2upx 4upx #ccc;
		width: 100%;
		box-sizing: border-box;
	}

	.logo image {
		width: 178upx;
		height: 30upx;
	}


	.language {
		flex-shrink: 0;
	}

	.langeageZh {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/EN-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.langeageEn {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/CH-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.momentsListBox {
		padding: 30upx;
		padding-bottom: 60upx;
	}

	.listgroup {
		width: 100%;
		margin-bottom: 30upx;
	}

	.messageBox {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.userCover {
		width: 75upx;
		height: 75upx;
		flex-shrink: 0;
	}

	.userCover image {
		width: 100%;
		height: 100%;
		border-radius: 16upx;
	}

	.userMessage {
		width: 100%;
		// margin-left: 30upx;
	}

	.userName {
		color: #fff;
		font-size: 32upx;
	}
	
	.hotelName {
		color: #fff;
		font-size: 28upx;
	}

	.userTitle {
		color: #fff;
		font-size: 24upx;
		padding: 10upx 0 20upx;
	}

	.imageBox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.imageBox image {
		width: 100%;
		margin-bottom: 20upx;
	}

	.timeBox {
		display: flex;
		justify-content: space-between;
		padding: 0;
		color: #999;
		font-size: 24upx;
	}

	.van-image {
		margin-bottom: 24upx;
		margin-right: 18upx;
	}

	.imageBox .van-image:nth-child(3n) {
		margin-right: 0;
	}

	.like_msg {
		display: flex;
		font-weight: bold;
		background: #7b7790;
		padding: 0 14upx;
		height: 32upx;
		border-radius: 4upx;
		color: #fff;
		position: relative;
	}

	.likeAndCommon {
		width: 0upx;
		height: 50upx;
		background: #020019;
		color: #fff;
		position: absolute;
		right: 80upx;
		top: -10upx;
		border-radius: 8upx;
		transition: all 0.3s;
		overflow: hidden;
		display: flex;
	}

	.likeAndCommon>view {
		width: 140upx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50upx;
		font-size: 20upx;
	}

	.likeAndCommon>view:first-child {
		position: relative;
	}

	.likeAndCommon>view:first-child::after {
		content: "";
		position: absolute;
		right: 0;
		top: 8upx;
		width: 2upx;
		height: 36upx;
		background: #333;
	}

	.likeAndCommon image {
		width: 32upx;
		height: 32upx;
		margin-right: 4upx;
	}

	.common image {
		width: 28upx;
		height: 26upx;
		margin-right: 4upx;
	}

	.commentBox {
		width: 100%;
		background: #060143;
		position: relative;
		border-radius: 8upx;
		margin-top: 20upx;
	}

	.commentBox::before {
		content: "";
		width: 0;
		height: 0;
		border: 20upx solid;
		position: absolute;
		top: -40upx;
		left: 16upx;
		border-color: transparent transparent #060143 transparent;
	}

	.likePeople {
		padding: 20upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.commentList {
		padding: 12upx 20upx;
		// border-top: 2upx solid #ccc;
	}

	.colorLike {
		display: flex;
		flex-wrap: wrap;
		color: #9c7757;
		align-items: center;
		justify-content: flex-start;
	}

	.colorLike text:first-of-type {
		margin-right: 4upx;
	}

	.colorLike image {
		width: 32upx;
		height: 32upx;
		margin-right: 4upx;
	}

	.commentMessage {
		width: 100%;
		margin: 8upx 0;
	}

	.commentMessage>view {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		color: #2e2c2c;
		text-align: justify;
	}

	.commentUser {
		color: #fff;
	}

	.commentUser text {
		color: #fff;
	}

	.saveMoments {
		position: fixed;
		width: 110upx;
		bottom: 50upx;
		right: 30upx;
		z-index: 99;
		height: 110upx;
		background: #b88d5b;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 90upx;

		image {
			width: 58upx;
			height: 58upx;
		}
	}

	.sendOut {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		z-index: 100;
		box-sizing: border-box;
		border-top: 2upx solid #c0c0c0;
		padding: 0 30upx;
		background: rgba(0, 0, 0, 0.6);
	}

	.inputBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0px;
		width: 100%;
		height: 100upx;
		box-sizing: border-box;
		border-top: 2upx solid #c0c0c0;
		padding: 0 30upx;
		background: #fff;
		z-index: 10001;
	}

	.inputBox input {
		height: 100%;
		width: 500upx;
	}

	.inputBox text {
		padding: 8upx 30upx;
		background: #eeeeee;
		border-radius: 80upx;
	}

	.showMore {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ccc;
		height: 80upx;
	}

	.showMore>view {
		width: 200upx;
		border-bottom: 2upx solid #aaa;
	}

	.showMore>view {
		margin: 0 16upx;
	}

	.popup-content {
		height: 180upx;
		background-color: #fff;
		text-align: center;

		input {
			padding: 20upx 0;

			&:first-child {
				border-bottom: 2upx solid #ebedf0;
			}
		}
	}

	.vue-ref {
		padding-bottom: 0 !important;
	}
</style>